<template>
    <div id="mapping-relationship">
        <!-- 表格工具栏 -->
        <div class="table-toolbar">
            <el-form label-width="125px" :model="searchParams">
                <div class="flex-box">
                    <el-form-item label="来源类型:" class="width-20">
                        <el-input v-model="searchParams._来源类型" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="来源分组:" class="width-20">
                        <el-input v-model="searchParams._来源分组" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="来源编号/名称:" class="width-20">
                        <el-input v-model="searchParams._来源编号" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="来源状态:" class="width-20">
                        <el-input v-model="searchParams._来源状态" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="条款编号/名称:" class="width-20">
                        <el-input v-model="searchParams._条款编号" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="O32/YH条目编号:" class="width-20">
                        <el-input v-model="searchParams._条目编号" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="O32/YH风险说明:" class="width-20">
                        <el-input v-model="searchParams._风险说明" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="最近调整日期:" class="width-25">
                        <el-date-picker
                            v-model="searchParams._最近调整日期"
                            type="date"
                            size="mini"
                            style="width: calc(50% - 8px)"
                            value-format="yyyyMMdd"
                            format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                        -
                        <el-date-picker
                            v-model="searchParams._最近调整日期"
                            type="date"
                            size="mini"
                            style="width: calc(50% - 8px)"
                            value-format="yyyyMMdd"
                            format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="" label-width="10px" class="width-15">
                        <el-checkbox v-model="searchParams.entryFilter">只展示当前有效映射</el-checkbox>
                    </el-form-item>
                    <el-form-item label="" label-width="0" class="width-8">
                        <el-checkbox v-model="searchParams.entryFilter">条目去重 </el-checkbox>
                        <el-tooltip
                            effect="dark"
                            content="同一条目同时对应不同来源类型下的条款时, 优先级:法律法规＞产品合同＞公司制度"
                            placement="right"
                        >
                            <i class="yh-question"></i>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="" label-width="0" class="width-12" style="text-align: right">
                        <el-button size="mini" type="primary" @click="handleBtnClick('search')">查询</el-button>
                        <el-button size="mini" @click="handleBtnClick('export')">导出</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <!--  -->
        <vxe-table
            border
            align="center"
            :data="tableData"
            v-loading="tableLoading"
            :scroll-y="{ enabled: false }"
            :span-method="rowspanMethod"
            show-overflow="tooltip"
            style="height: calc(100% - 105px)"
            show-header-overflow="tooltip"
            resizable
            :filter-config="{ remote: true, iconNone: 'el-icon-search', iconMatch: 'el-icon-search' }"
        >
            <vxe-colgroup title="源条款信息" header-class-name="custom-span">
                <!-- header-class-name="hidden-cell" -->
                <vxe-column field="sourceType" title="来源类型" min-width="100px" :filters="[{ data: '' }]">
                    <template #filter="{ $panel, column }">
                        <div>
                            <el-input
                                ref="searchInput"
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </div>
                    </template>
                </vxe-column>
                <vxe-column field="sourceGroup" title="来源分组" min-width="100px"></vxe-column>
                <vxe-column field="sourceCode" title="来源编号" min-width="100px"></vxe-column>
                <vxe-column field="sourceName" title="来源名称" min-width="140px"></vxe-column>
                <vxe-column field="sourceVision" title="来源版本号" min-width="120px"></vxe-column>
                <vxe-column field="sourceStatus" title="来源状态" min-width="100px"></vxe-column>
                <vxe-column field="termCode" title="条款编号" min-width="100px"></vxe-column>
                <vxe-column field="termName" title="条款名称" min-width="140px"></vxe-column>
            </vxe-colgroup>

            <vxe-colgroup title="O32条目信息" header-class-name="custom-span">
                <vxe-column field="O32EntryCode_" title="O32条目编号" min-width="100px"></vxe-column>
                <vxe-column field="O32EntryName_" title="O32风险说明" min-width="140px"></vxe-column>
                <vxe-column field="O32EntryStatus" title="O32条目状态" min-width="100px"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="YH条目信息" header-class-name="custom-span">
                <vxe-column field="YhEntryCode_" title="YH条目编号" min-width="100px">
                    <template #default="{ row }">
                        <a href="javascript:;" @click="goToRouter">{{ row.YhEntryCode_ }}</a>
                    </template>
                </vxe-column>
                <vxe-column field="YhEntryName_" title="YH风险说明" min-width="140px"></vxe-column>
                <vxe-column field="YhEntryStatus" title="YH条目状态" min-width="100px"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="" header-class-name="custom-span">
                <vxe-column field="lastAdjustTime" title="最近调整时间" min-width="140px"></vxe-column>
            </vxe-colgroup>
        </vxe-table>

        <!-- 导出 -->
        <yh-dialog title="新建下载" :visible.sync="exportVisible" width="600px" :modal="false" class="search-dialog" drag>
            <el-form label-position="right" label-width="80px">
                <div>
                    <el-form-item label="文件名:" required class="width-100">
                        <el-input v-model="exportParams.exportFileName" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="exportVisible = false" size="mini">取消</el-button>
                <el-button @click="submitExport" size="mini" type="primary">下载</el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { ColumnVO, TableConfigVO } from '@/common/vo';
import { jumpRouter } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';
import API from '../api/index';

@Component({ name: 'ComplianceOverview', components: {} })
export default class ComplianceOverview extends Vue {
    tableLoading: boolean = false;
    tableData: any[] = [];

    searchParams: any = {
        showLevel: '4', // 展示层级
        entryFilter: true, // 条目去重
        sourceName: '',
    };

    exportVisible: boolean = false;
    exportParams: any = { exportFileName: '映射关系总览信息' };

    mounted() {
        this.getTableData();
    }

    getTableData(): void {
        this.tableLoading = true;

        API.getComplianceOverview({ ...this.searchParams })
            .then((res: any) => {
                this.tableData = res || [];
            })
            .finally(() => {
                this.tableLoading = false;
                this.tableData = [
                    {
                        id: '1',
                        sourceType: '法律法规',
                        sourceGroup: '证监会',
                        sourceCode: 'LY046',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK091',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '30',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '12',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                    {
                        id: '2',
                        sourceType: '法律法规',
                        sourceGroup: '上交所',
                        sourceCode: 'LY047',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK092',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '31',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '13',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                    {
                        id: '3',
                        sourceType: '法律法规',
                        sourceGroup: '上交所',
                        sourceCode: 'LY047',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK098',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '32',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '14',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                    {
                        id: '3',
                        sourceType: '法律法规',
                        sourceGroup: '上交所',
                        sourceCode: 'LY047',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK098',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '33',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '15',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                ];
            });
    }

    handleBtnClick(operation): void {
        if (operation === 'search') {
            this.getTableData();
        } else if (operation === 'reset') {
        } else if (operation === 'export') {
            this.exportVisible = true;
        }
    }

    goToRouter(): void {
        jumpRouter({
            title: '投资风险设置',
            path: '/risk/setting/itemSetting',
            type: '0', // 0-内部 1-外部 (内部是指 待跳转页面代码 在这套vue里)
            params: { entryCode: 'YH001' }, // string | any 需要带进跳转页面的参数
        });
    }

    // 通用行合并函数（将相同多列数据合并为一行）
    rowspanMethod({ row, _rowIndex, column, visibleData }) {
        console.log(row, _rowIndex, column, visibleData);
        const fields = ['sourceType', 'sourceGroup', 'sourceCode', 'termCode'];
        let field = column.property;
        if (['sourceStatus', 'sourceVision', 'sourceName'].includes(field)) {
            field = 'sourceCode';
        } else if (field == 'termName') {
            field = 'termCode';
        }
        const cellValue = row[field];
        if (cellValue && fields.includes(field)) {
            const prevRow = visibleData[_rowIndex - 1];
            let nextRow = visibleData[_rowIndex + 1];
            if (prevRow && prevRow[field] === cellValue) {
                return { rowspan: 0, colspan: 0 };
            } else {
                let countRowspan = 1;
                while (nextRow && nextRow[field] === cellValue) {
                    nextRow = visibleData[++countRowspan + _rowIndex];
                }
                if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 };
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
#mapping-relationship {
    height: 100%;
    min-width: 1350px;
    padding: 0 10px;

    .yh-question {
        font-weight: bold;
        padding: 0 5px;
    }

    .my-input {
        margin: 10px;
        width: 150px;
    }
}

/*** required 红点 ***/
/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: '*' !important;
    margin-right: 2px !important;
    color: red;
}

/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
    display: none;
}

/*** required 红点 ***/
</style>
<style>
.custom-span {
    background-color: #fff !important;
}
</style>
